<template>
<div class="heads container">
    <p class="title" @click="TocontFirst">侨梦苑·中关村智造园</p>
    <ul>
        <li  @click="Tocontone">项目概况</li>
        <li @click="Toconttwo">出租房源</li>
        <li @click="Tocontthree">标准层户型图</li>
        <li @click="Tocontfour">楼盘概述</li>
        <li @click="Tocontfive">入驻企业</li>
        <li @click="Tocontsix">交通地图</li>
        <li @click="Tocontsenven">联系我们</li>
    </ul>
    <p class="phone fr">电话：010-56533466</p>
</div>
</template>

<script>
export default {
    methods: {
        // 项目概括
        Tocontone() {
            document.querySelector("#genera").scrollIntoView(true);
        },
        // 房源
        Toconttwo() {
            document.querySelector("#house").scrollIntoView(true);
        },
        // 标准层平面图
        Tocontthree() {
            document.querySelector("#planview").scrollIntoView(true);
        },
        // 楼盘概述
        Tocontfour() {
            document.querySelector("#propertie").scrollIntoView(true);
        },
        //   入驻企业
        Tocontfive() {
            document.querySelector("#settled").scrollIntoView(true);
        },
        // 交通地图
        Tocontsix() {
            document.querySelector("#address").scrollIntoView(true);
        },
        // 联系我们
        Tocontsenven() {
            document.querySelector("#address").scrollIntoView(true);
        },
        
         TocontFirst() {
            document.querySelector("#brasdcast").scrollIntoView(true);
        }
       
    },
}
</script>

<style lang="less" scoped>
.heads {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    li {
        float: left;
        padding: 12px 16px;
        cursor: pointer;

        &:hover {
            background-color: #1274C8;
            color: #fff;
        }
    }

    .phone {
        color: #1274C8;
    }

    .title {
        color: #C91C1F;
        cursor: pointer;
    }
}


</style>
